<template>
  <view>
    <view
        style="padding: 20rpx;box-sizing: border-box">

    <view
        style="height: 140rpx;"
        class="btn">

      <view style="height: 20rpx"></view>

      <view>
        <u-row>
          <u-col :span="2">
            <image
                :src="$kt.file.byPath('/image/clockIn.svg')"
                mode="widthFix"
                style="width: 80rpx; height: 80rpx;"></image>
          </u-col>
          <u-col :span="8">
            <view
                v-if="getIsHasWorkTime()"
                style="font-size: 30rpx;color: #333333">
              <text>Your work time</text>
            </view>
            <view
                v-if="getIsHasWorkTime()"
                style="height: 10rpx"></view>
            <view style="font-weight: bold;font-size: 36rpx">
              <text
                  v-if="getIsHasWorkTime()"
              >
                <text>{{userSelf.workTime}}</text>
                <text>{{" - "}}</text>
                <text>{{ userSelf.offWorkTime }}</text>
                <text
                    style="font-weight: normal;font-size: 28rpx"
                    v-if="userSelf.isNextDayOffWork">
                  {{"(Next day)"}}
                </text>
              </text>
              <!-- 未设置上下班时间 -->
              <text
                  style="font-size: 30rpx"
                  v-else>No commuting time set</text>
            </view>
            <view style="height: 10rpx"></view>
            <view
                v-if="!getIsHasWorkTime()"
                style="font-size: 28rpx;color: #999999">
<!--              <text>请联系管理人员设置</text>-->
              <text>Please contact the administrator to set</text>
            </view>
          </u-col>
          <u-col :span="2">
            <view style="font-weight: bold;font-size: 36rpx">
              <text>{{ nowTime }}</text>
            </view>
          </u-col>
        </u-row>

      </view>

    </view>


    <view style="height: 20rpx"></view>

    <view
        v-if="isHasClockOut&&lastClock.type!==1"
    >
      <!-- 今天的工作结束了 -->
      <view style="font-size: 40rpx;text-align: center;letter-spacing: 2rpx">
        <view style="height: 10rpx"></view>
        <view>
          <text>Today's work is over</text>
        </view>
      </view>
      <view style="height: 50rpx"></view>
    </view>

    <view>
      <!-- 上下班打卡 -->
      <kt-button
          v-if="!isHasClockOut"
          ref="ktButton"
          @click="()=>{if(getIsShowClockIn()){goToClockIn(1)}else{{goToClockIn(2)}}}"
      >
        {{getIsShowClockIn()?'Clock in':'Clock out'}}
      </kt-button>
      <view v-else>
        <!-- 更新下班卡 -->
        <kt-button
            ref="ktButton"
            @click="()=>{if(getIsShowClockIn()){goToClockIn(1)}else{{goToClockIn(2)}}}"
        >
          {{getIsShowClockIn()?'Continue working':'Clock out'}}
        </kt-button>
      </view>

    </view>

    <view
        v-if="isHasClockOut"
        style="font-size: 26rpx;text-align: center">
      <view style="height: 40rpx"></view>

      <view>
        <!-- 更新下班卡 -->
        <text
            @click="goToClockIn(2)"
            class="btn1"
            style="color: #000000;">{{'Update clock out'}}</text>
      </view>
    </view>
    </view>

    <view class="menu-box">
      <view class="menu">

        <view class="menu-icon-box">
          <image
              mode="aspectFill"
              class="menu-icon"
              :src="$kt.file.byPath('image/workOvertime.svg')"></image>
        </view>
        <view class="menu-text">{{"Work overtime"}}</view>
      </view>
      <view class="menu">

        <view class="menu-icon-box">
          <image
              mode="aspectFill"
              class="menu-icon"
              :src="$kt.file.byPath('image/buka.svg')"></image>
        </view>
        <view class="menu-text">{{ "Supplementary punchout/in" }}</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      gmtNow: new Date().getTime(),
      nowTime: "",
      // 打卡成功
      isClockSuccess: false,
      // 最近一次打卡数据
      lastClock: {},
      // 最近一次打卡数据是否加载完成
      isLastClockLoad: false,
      // 是否在打卡中
      isClocking: false,
      loading: false,
      userSelf:{
        workTime: null,
        offWorkTime: null,
        // 是否是次日
        isNextDayOffWork: false,
      },
      isHasClockOut: false,
    }
  },
  created() {
    this.gmtNow = new Date().getTime();
    this.nowTime = this.$kt.date.format(this.gmtNow, 'hh:mm')
    setInterval(() => {
      this.gmtNow = new Date().getTime();
      this.nowTime = this.$kt.date.format(this.gmtNow, 'hh:mm')
      // 最后一次打卡记录下班
      if(this.lastClock.type === 2) {
        this.getIsHasClockOut();
      }
    }, 2000);
    this.getLastClockInBySelf();
    this.getUserSelf();
  },
  methods:{
    /**
     * 是否已下班
     */
    getIsHasClockOut() {

      if (!this.lastClock) {
        this.isHasClockOut = false;
        return false;
      }
      if (!this.getIsHasWorkTime()) {
        this.isHasClockOut = false;
        return false;
      }
      // 最后一次打卡记录上班
      if(this.lastClock.type === 1) {
        this.isHasClockOut = false;
        return false;
      }

      // 最后一次打卡记录是下班，且小于自己的下班时间3个小时
      let gmtClock = new Date(this.lastClock.gmtClock).getTime();
      // 判断是否未超过12个小时
      if (this.gmtNow - gmtClock < 3 * 60 * 60 * 1000) {
        this.isHasClockOut = true;
        return true;
      }

      this.isHasClockOut = false;
      return false;
    },
    /**
     * 是否有工作时间设置
     */
    getIsHasWorkTime() {
      return this.userSelf.workTime && this.userSelf.offWorkTime;
    },

    /**
     * 获取用户信息
     */
    getUserSelf() {
      this.userSelf = this.$emp.getSelf();
    },
    /**
     * 是否显示上班打卡
     */
    getIsShowClockIn() {
      // 判断有没有打卡记录，如果没有就是上班打卡
      if (!this.lastClock) {
        return true;
      }
      // 如果最后一条的type不是1，就显示上班打卡
      if(this.lastClock.type !== 1) {
        return true;
      }
      // 否则就是下班打卡
      return false;
    },
    getLastClockInBySelf() {
      this.loading = true;
      this.$kt.request.send({
        uri: '/business-erp-web/empClock/getLastClockBySelf',
        data: {
          enterpriseId: this.$emp.getCurrentEnterprise().id
        },
        stateSuccess: res => {
          this.lastClock = res.data;
          // 设置最后一次打卡记录加载完成
          this.isLastClockLoad = true;
          this.getIsHasClockOut();
          this.loading = false;
        },
        stateFail: err => {
          this.loading = false;
          // 设置最后一次打卡记录加载完成
          this.isLastClockLoad = true;
        }
      })
    },
    goToClockIn(type) {

      if (this.isClocking) {
        return;
      }
      this.isClocking = true;
      this.$refs.ktButton.loading();
      this.$kt.request.send({
        uri: '/business-erp-web/empClock/clockBySelf',
        data: {type,
          enterpriseId: this.$emp.getCurrentEnterprise().id
        },
        stateSuccess: res => {
          // console.log(res.data)
          this.$emit('clock');
          setTimeout(()=>{
            this.lastClock = res.data;
            this.getIsHasClockOut();
            this.isClocking = false;
            this.isClockSuccess = true;
            this.$refs.ktButton.success(res.msg);
          },500);
          setTimeout(() => {
            this.isClockSuccess = false;
          }, 2000)
        },
        stateFail: err => {
          this.isClocking = false;
          this.$refs.ktButton.error(err.errMsg);
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.menu-box {
  box-sizing: border-box;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 20rpx;


  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #F0F0F0;
    background-color: #FFFFFF;
    margin-bottom: 20rpx;


    .menu-icon-box {
      width: 50rpx;
      height: 40rpx;
    }

    .menu-icon {
      width: 40rpx;
      height: 40rpx;
    }


  }

}

.menu:active {
  opacity: .6;
}

.btn1:active{
  opacity: .6;
}
</style>
